<template>
  <!-- html部分 -->
  <!-- 两个大括号括起来可以把data中的内容作为文本引入html中 -->
  <h3>{{ message + 1 }}</h3>
  <!-- v-html 将标签插入html -->
  <!-- v-bind: 动态绑定属性，可以简写为: -->
  <div v-html="baidu" :id="message"></div>

  <!-- 双大括号中可以放入表达式 但不能放入语句-->
  <h3>{{ note.split("").reverse().join("") }}</h3>

  <!-- v-if决定是否渲染 -->
  <h3 v-if="condition">{{ message + 1 }}</h3>
  <!-- v-else跟在v-if后 -->
  <h3 v-else>{{ message + 2 }}</h3>

  <!-- v-show通过display决定是否展示 -->
  <h3 v-show="condition">{{ message + 3 }}</h3>
  <!-- 
    v-if和v-show的区别
      v-if是惰性的,只有在判断为真时才会创建节点并渲染,v-show无论真假都会创建节点,然后通过display
      决定是否显示,当需要频繁开关时,推荐使用v-show
   -->

   <!-- v-for 用来遍历数组 渲染一系列节点-->
   <ul class="mylist">
    <li  v-for="item in list"> id:{{ item.id }} name:{{ item.name }}</li>
   </ul>
</template>

<script>
export default {
  //组件名称
  name: "HelloWorld",
  //数据，data函数
  data() {
    return {
      message: 10,
      baidu:`<a href="">1</a>`,
      note:"helloworld",
      condition:false,

      list:[
          {
            id:"1",
            name:"a"
          },
          {
            id:"2",
            name:"b"
          },
          {
            id:"3",
            name:"c"
          },
          {
            id:"4",
            name:"d"
          },
        
      ]
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 样式部分 */
h3 {
  background-color: aqua;
}

.mylist{
  background-color: silver;
  list-style-type: none;

  display: flex;
  flex-direction: column;

}

.mylist li{
  width: 200px;
  height: 50px;

  margin-top: 5px;
  background-color: aquamarine;

  line-height: 50px;

}
</style>
